<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport"-->
    <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta itemprop="name" content=""/>
    <meta name="keywords" content=""/>
    <title>盛世传媒</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/chanpin.css">
</head>
<body>
<div class="header">

    <div class="logo left"><image class="logoimg"  src="../images/logo.png" alt="logo" title="盛世传媒"></image>
    </div>
    <div class="daohang right">
        <ul>
            <li><a href="../index.html">首页</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="ditu.html">位置地图</a></li>
            <li><a href="news.html">新闻资讯</a></li>
            <li class="active"><a href="chanpin.html">产品介绍</a></li>
            <!--<li><a href="tel.html">联系我们</a></li>-->
            <li><a href="activity.html">公益活动</a></li>
        </ul>
    </div>
</div>

<div class="main">
    <div class="banner"><img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/aboutBanner.jpg" alt="简介">
    <span>产品</span>
    <h2>客户利益最大化</h2>
    <p>盛世传媒是镇平县最大规模的广告发布,影视制作，活动策划，新媒体运营等新型文化传媒有限公司。</p>
    </div>
    <!--锚点-->
    <div class="maodian">
        <ul :class='top?"fixed":""'>
            <li v-for="(item,index) in maodian.maodians" :class="maodian.active==index?'is':''" :key="index"  @click="tag(index)">{{item.value}}
            </li>
        </ul>
    </div>

    <div class="scroll">
        <section class="d_jump">
            <p class="title">LED大屏广告</p>
            <p class="test">覆盖全城的户外LED大屏</p>
            <div class="video">
            <!--大屏幕轮播-->

                <div class="swiper-container" id="swF">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in chanpinF" style="width: 100%;position: relative;height: 460px">
                            <img :src="item.src" style="width: 100%;height: 100%" :alt="index" :title="index">
                            <P style="bottom: 0; background: white; position: absolute; left: 0; text-align: center;padding: 15px 10px">{{item.text}}</P>
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div>
                </div>

            </div>
        </section>
        <section class="d_jump">
            <p class="title">公交站台媒体</p>
            <p class="test">低成本，高回报，高价值</p>
            <div class="video">
                <div class="swiper-container" id="swS">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in chanpinS">
                            <img :src="item.src" :alt="index" :title="index">
                            <!--<P style="text-align: center;padding: 15px 0">{{item.text}}</P>-->
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white" style="right: 40px"></div>
                </div>
            </div>
        </section>
        <section class="d_jump">
            <p class="title">移动电视</p>
            <p class="test">镇平公交车媒体广告独家运营权</p>
            <div class="video">
                <video controls="controls" src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E5%85%AC%E4%BA%A4%E8%BD%A6%E5%B9%BF%E5%91%8A.mp4"></video>
            </div>
        </section>
        <section class="d_jump heigher">
            <p class="title">新媒体运营</p>
            <p class="test">线上宣传:产品宣传，推广，营销一系列运营手段</p>
            <div class="video flex small" style="width: 40%;margin: 20px auto;">
            <div class="yuan">
                <div class="yuan second">
                    <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/fenxi.png" alt="分析" title="分析">
                    <span>各方位分析</span>
                </div>
            </div>
                <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/next.png" class="next" alt="icon" title="图标">

                <div class="yuan">
                    <div class="yuan second">
                        <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/tuiguang.png" alt="推广" title="推广">
                        <span>匹配推广文案</span>
                    </div>
                </div>
                <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/next.png" class="next" alt="icon" title="图标">
                <div class="yuan">
                    <div class="yuan second">
                        <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/xiaoguo.png" alt="效果" title="效果">
                        <span>效果最大化</span>
                    </div>
                </div>
            </div>
            <p class="yunText" style="margin: 50px auto;">镇平盛世传媒，根据客户需求，进行多方位分析，定制最合适的推广方案，并对传播过程进行实时监控，提供全面的数据分析，帮助品牌推广效果最大化</p>
            <div class="float">
                <div>
                    <ul>
                        <li>1对1服务</li>
                        <li>需求分析</li>
                        <li>个性方案</li>
                        <li>定制推广</li>
                        <li>传播实时监控</li>
                    </ul>
                </div>
                <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/chanpinGy.jpg" alt="1" title="公益">

            </div>
        </section>
        <section class="d_jump bg heigher">
            <p class="title">影视媒体制作</p>
            <p class="test">广告策划，影视制作，营销 一站式服务</p>
            <div class="video flex" :class="wh?'xiangying':''" style="flex-wrap: wrap;width: 30%;margin: 20px auto;">
                <div class="yuan">
                    <div class="yuan second">
                        <span>定制企业宣传</span>
                        <span>Customized enterprise promotion</span>
                    </div>
                </div>
                <div class="yuan">
                    <div class="yuan second">
                        <span>广告文案</span>
                        <span>AD copy</span>
                    </div>
                </div>
                <div class="yuan">
                    <div class="yuan second">
                        <span>微电影</span>
                        <span>Micro film</span>
                    </div>
                </div>
                <div class="yuan" style="margin-top: 30px">
                    <div class="yuan second">
                        <span>会议拍摄与制作</span>
                        <span>Meeting shooting and production</span>
                    </div>
                </div>
                <div class="yuan" style="margin-top: 30px">
                    <div class="yuan second">
                        <span>私人定制MV</span>
                        <span>Customized MV</span>
                    </div>
                </div>
                <div class="yuan" style="margin-top: 30px">
                    <div class="yuan second">
                        <span>高端婚礼</span>
                        <span>High-end wedding</span>
                    </div>
                </div>
            </div>
            <p style="width: 40%;margin:20px auto;text-align: center; padding-top: 20px;border-top: 2px solid gray">我们的目标是：更精准的视觉,更丰富的内涵,更深情的表达,更多元的实现</p>
            <div>
                <ul class="iconl" :class="wh?'xiangyingF':''">
                    <li class="left flex">
                        <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/shexiang.png" alt="1">
                       <p> 拥有影视行业主流的器材设备。稳定器、脚架、灯光、批量光盘刻录等一整套专业设备，将会给您带来震撼的视觉享受。 可以把任何造物活动</p>
                    </li>
                    <li class="right">
                        <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/team.png" alt="2">

                        在拥有目前市场上主流器材设备的同时，我们始终坚持以人才为主导力，力求以一个精英级的团队，用精湛的技艺让您脱颖而出。公司在拍宣传片和拍微电影方面已经鼎沪盛誉，拥有丰富的影视影像传媒经验以及媒体资源。此外，公司还拥有一批从前期策划、文案到后期剪辑至少5年行业经验的专业人才队伍。
                    </li>
                    <li class="left flex">
                        <img src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/idea.png" alt="3">
                    <p> “创意”是影视宣传的灵魂和生命。在盛世，我们执著于对创意的不懈追求，我们专注于为您量身定做只属于您的创意，让您成为行业和人群中的焦点，让您和您的品牌吸引更多的目光。我们用最专业的手法、最全面的策划、最先进的设备，为您提供最优质的服务！</p>
                    </li>

                </ul>
            </div>
        </section>
        <section class="d_jump heigher">
            <p class="title">活动策划</p>
            <p class="test">产品营销策划 ， 活动庆典策划</p>
            <div class="video"><video controls="controls" src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/cehua.MOV"></video>
            <p class="flex" style="margin-top: 30px;font-size: 34px"><span>会展服务</span><span>庆典策划</span><span>活动执行</span><span>婚介</span><span>公司年会</span><span>剪彩开幕</span></p>
                <ul class="ultext">
                    <li> <span>策划理念：</span> 中国风，欧美调，商务范，时尚坊，创意趴，只有你想不到，没有我们做不到 </li>
                    <li> <span>高效工作：</span> 我们保证1小时内给您初步思路，24小时给您初步方案，48小时给您详细方案</li>
                    <li> <span>专业团队：</span> 工作流程及团队分工图,专业的人做专业事</li>
                    <li> <span>个性定制：</span>  量身打造最适合您的活动方案</li>
                    <li> <span>售后服务：</span> 我们承诺每一场活动方案都会为您保留，每一个活动方案都会改到让您满意为止！</li>
                </ul>
            </div>
        </section>
    </div>
</div>
<!-- 底部 -->
<div class="foot">
    <ul class="flex">
        <li class="flex"><image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/didianIcon.png"></image>
            <p>河南省南阳市镇平县体育中心主席楼</p>
        </li>
        <li class="flex">
            <image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/phoneIcon.png"></image>
            <p>联系电话 : 0377-65566888</p>
        </li>
        <li class="flex">
            <image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/timeIcon.png"></image>
            <p>工作时间 : 09:00--18:00</p>
        </li>
        <li class="flex">
            <image src="http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/youjianIcon.png"></image>
            <p>contact@fkadjkhsf.co</p>
        </li>
    </ul>
</div>
</body>
</html>
<script src="../js/swiper.min.js"></script>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    window.onload=function () {
        var mySwiper = new Swiper('#swF', {
            navigation:{
              nextEl:'.swiper-button-next',
              prevEl:'.swiper-button-prev'
            },
            // loop:true,
            effect : 'fade',
            // slidesPerView: 1,
            // autoplay:false
            // centeredSlides: true,
            // observer:true ,
            // observeParents:true,
            autoplay:{
                delay:4000,
                stopOnLastSlide:false
            }
        })
        var mySwiperS = new Swiper('#swS', {
            observeParents:true,
            navigation:{
                nextEl:'.swiper-button-next',
                prevEl:'.swiper-button-prev'
            },
            // autoplay:{
            //     delay:4000,
            //     stopOnLastSlide:true
            // }
        })
    }
    window.onresize=function () {
        console.log('change')
    }

</script>
<script type="text/javascript">
    var app = new Vue({
        el:".main",
        data:{
            wh:false,
            top:false,
            maodian:{
                active:"",
  maodians:[
     {value:"LED大屏幕广告媒体",active:false},
    {value:"公交车站广告媒体",active:false},
    {value:"城市移动电视广告媒体",active:false},
    {value:"新媒体运营中心",active:false},
    {value:"影视媒体制作中心",active:false},
    {value:"活动策划",active:false}
            ]
            },
            chanpinF:[{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E5%B7%A5%E5%95%86.png',
                text:"健康路与中山街交叉口:面积60平方米"
            },{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E8%BD%A6%E7%AB%99.png',
                text:"卫生路与涅阳路交叉口:面积27平方米"
            },{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E7%94%B5%E8%A5%BF.png',
                text:"电力广场路口:面积50平方米"
            },{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E7%8E%89%E9%BC%8E.png',
                text:"玉鼎广场南侧花坛大屏:面积70平方米"
            },{
                src:"http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E7%94%B5%E4%B8%9C.png",
                text:"电力广场中心大屏:面积80平方米"
            },{
                src:"http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E6%96%87%E5%8C%96%E5%B9%BF%E5%9C%BA.png",
                text:"文化广场大屏:面积70平方米"
            },{
                src:"http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E9%82%AE%E5%B1%80.png",
                text:"府前街与步行街交叉口屏:面积50平方米"
            },{
                src:"http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/%E4%BD%93%E8%82%B2%E5%9C%BA.png",
                text:"人民体育场大屏:面积120平方米"
            }],
            chanpinS:[{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/ping/gongjiao.jpg',
                text:"介绍1"
            },{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/ping/gongjiaoF.jpg',
                text:"介绍2"
            },{
                src:'http://sscmgw.oss-cn-beijing.aliyuncs.com/guanwang/images/ping/gongjiaoS.jpg',
                text:"介绍3"
            }]
        },
        methods:{
            tag(index) {
                // 用 class="d_jump" 添加锚点
                let jump = document.querySelectorAll('.d_jump')
                let total = jump[index].offsetTop
                let distance = document.documentElement.scrollTop || document.body.scrollTop
                // 平滑滚动，时长500ms，每10ms一跳，共50跳
                let step = total / 50
                if (total > distance) {
                    smoothDown()
                } else {
                    let newTotal = distance - total
                    step = newTotal / 50
                    smoothUp()
                }
                function smoothDown () {
                    if (distance < total) {
                        distance += step
                        document.body.scrollTop = distance
                        document.documentElement.scrollTop = distance
                        setTimeout(smoothDown, 10)
                    } else {
                        document.body.scrollTop = total
                        document.documentElement.scrollTop = total
                    }
                }
                function smoothUp () {
                    if (distance > total) {
                        distance -= step
                        document.body.scrollTop = distance
                        document.documentElement.scrollTop = distance
                        setTimeout(smoothUp, 10)
                    } else {
                        document.body.scrollTop = total
                        document.documentElement.scrollTop = total
                    }
                }
            },
            scroll:function () {
                let scTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if (scTop>=439){
                    this.top=true
                }else {this.top=false}
                if(scTop>439&&scTop<1039){
                    this.maodian.active=0
                }else if(scTop>1039&&scTop<1639){
                    this.maodian.active=1
                }else if(scTop>1639&&scTop<2239){
                    this.maodian.active=2
                }else if(scTop>2239&&scTop<3339){
                    this.maodian.active=3
                }else if(scTop>3339&&scTop<4439){
                    this.maodian.active=4
                }else if(scTop>=4439){
                    this.maodian.active=5
                }
            }
        },
        watch:{
          wh(val){
              console.log(val)
              this.wh=  val
          }
        },
        mounted(){
            let _const = this;
            window.addEventListener("scroll",this.scroll)
            window.onresize=()=>{
               let width =  document.documentElement.clientWidth;
               if(width<=1644){
                _const.wh=true
               }else {
                   _const.wh=false
               }
                // return (()=>{
                //     _const.wh=document.documentElement.clientWidth
                //
                // })

            }
        },
        created(){

        }
    })
</script>